<template>
  <el-dialog
    title="预览模板"
    :visible.sync="showFlag"
    :modal="false"
    width="40%"
  >
    <div class="content">
      <div class="cardborder" style="width: 400px; height: 170px">
        <div style="width: 100%"></div>
        <svg id="jsbarcode1"></svg>
      </div>
    </div>
  </el-dialog>
</template>

<script>
// reportAll
export default {
  name: "productReport2",
  data() {
    return {
      caseInfo: {},
      showFlag: false,
    };
  },
  methods: {
    init(row) {
      if (!row.barcodeText) return this.$message.error("暂无条码信息");
      console.log(row.barcodeText, "row");
      this.caseInfo.reportSn = row.snCode;
      this.caseInfo.snId = row.snId;
      this.showFlag = true;
      setTimeout(() => {
        JsBarcode(document.getElementById("jsbarcode1"), row.barcodeText, {
          lineColor: "#000",
          width: 3,
          height: 80,
          textMargin: 5,
          font: "SimSun", //设置文本的字体
          fontSize: 15, //设置文本的大小
          text: row.barcodeText,
          textAlign: "left", //设置文本的水平对齐方式
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
// .contentDiv {
//   width: 1350px;
// }
.el-table {
  margin-bottom: 15px;
}
.content {
  width: 600px;
  height: 300px;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cardborder {
  // flex 换行
  flex-wrap: wrap;
  display: flex;
  justify-content: center;
  align-content: center;
  border-radius: 5px;
}
#jsbarcode1 {
  margin-top: 0px;
}
.el-dialog__body {
  //超出隐藏
  overflow: hidden;
}
.test {
  font-size: 15px;
  font-family: SimSun;
  color: black;
  margin-left: 80px;
}
</style>
